<template>
    <div :class="type=='search'?'inblock':'flex'">
        <el-form-item prop="province">
            <template slot="label">
                <span>
                    <!-- <span class="reddot">*</span>  -->
                {{title}}</span>
            </template>
            <el-select v-model="form.province" placeholder="省份" clearable filterable @change="onselectCitys($event,1)" style="width:120px;margin-right:6px">
                <el-option v-for="(item,index) in province"
                    :key="index"
                    :label="item.name"
                    :value="item.name">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="" prop="city" label-width="0" v-if="type=='search'">
            <el-select v-model="form.city" placeholder="市" clearable filterable @change="onselectCitys($event,2)" style="width:120px;margin-right:6px">
                <el-option v-for="(item,index) in citys"
                    :key="index"
                    :label="item.name"
                    :value="item.name">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="" prop="city" label-width="0" v-else>
            <el-select v-model="form.city" placeholder="市" clearable filterable @change="onselectCitys($event,2)" :filter-method="cityFilter" @clear='clear' style="width:120px;margin-right:6px">
                <el-option v-for="(item,index) in citys"
                    :key="index"
                    :label="item.name"
                    :value="item.name+'_'+index">
                </el-option>
            </el-select>
        </el-form-item>
        <!-- <el-form-item label="" prop="area" label-width="0"> -->
        <!-- <el-form-item label="" prop="area" label-width="0" v-if="type=='search'"> -->
            <!-- <el-select v-model="form.area" placeholder="区（县）" clearable filterable  @change="onselectCitys($event,3)" style="width:120px">
                <el-option v-for="(item,index) in region"
                    :key="index"
                    :label="item.name"
                    :value="item.name">
                </el-option>
            </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="" prop="area" label-width="0" v-else>
            <el-select v-model="form.area" placeholder="区（县）" clearable filterable :filter-method="regionFilter" @change="onselectCitys($event,3)" style="width:90px">
                <el-option v-for="(item,index) in region"
                    :key="index"
                    :label="item.name"
                    :value="item.name+'_'+index">
                </el-option>
            </el-select>
        </el-form-item> -->
    </div>
</template>


<script>
import { getCitys,getRegions,
// searchRegion,getSearchCitys,searchCity,getSearchProvince 
} from '@/api/comm';
export default {
    data(){
        return {
            form:{
                province:'',
                city:"",
                area:"",
            },
            province:[],
            citys:[],
            region:[],
            isSearch:false,
            regionSearch:{},
            iscitySearch:false
        }
    },

    props:{
        info:{
            type:Object,
        },
        type:{
            type:String,
            default:""
        },
        title:{
            default:"地区"
        }
    },

    created(){
        // 获取城市
        this.getProvince(1);
        if(this.info&&this.info.province){
            this.form.province = this.info.province;
        }
        if(this.info&&this.info.city){
            this.form.city = this.info.city;
        }
        if(this.info&&this.info.area){
            this.form.area = this.info.area;
        }
    },

    methods:{
        // 获取省份
        getProvince(type,params,info=''){
            if(type==1){ //省份
                this.getDicts('/user/user/province').then(res=>{
                    this.province = res.data;
                    // 回显
                    if(this.form.province){
                    let indexId = -1;
                    this.province.forEach(item=>{
                        if(this.form.province == item.name){
                        indexId = item.id;
                        }
                    })
                    console.log('indexId:',indexId);
                    if(indexId>=0){
                        this.getProvince(2,{province_index:indexId},99);
                    }
                    // let index = this.province.indexOf(this.form.province);
                    // if(index>=0){
                    //   this.getProvince(2,{province_index:index},99);
                    // }
                    }
                    
                });
            }
            if(type==2){ //城市
                getCitys(params).then(res=>{
                    this.citys = res.data;
                    // 回显
                    if(info && this.form.province&&this.form.city){
                        let pindex = -1;
                        this.province.forEach(item=>{
                            if(this.form.province == item.name){
                            pindex = item.id;
                            }
                        })
                        let cindex = -1;
                        this.citys.forEach(item=>{
                            if(this.form.city == item.name){
                            cindex = item.id;
                            }
                        })
                        this.getProvince(3,{province_index:pindex,city_index:cindex});
                    }
                    // 
                    if(this.regionSearch.cid&&this.form.province){
                        this.citys.forEach(item=>{
                            if(this.regionSearch.cid  == item.id){
                            this.form.city = item.name;
                            }
                        })
                        this.getProvince(3,{province_index:this.regionSearch.pid,city_index:this.regionSearch.cid});
                    }
                })
            }
            if(type==3){ //地区
                getRegions(params).then(res=>{
                    this.region = res.data;
                    if(this.isSearch){
                        if(this.regionSearch.aid){
                            this.region.forEach(item=>{
                                if(this.regionSearch.aid == item.id ){
                                    this.form.area = item.name;
                                }
                            })
                        }
                        this.isSearch = false;
                        this.regionSearch = {};
                    }
                })
            }
        },

        // 城市选择
        async onselectCitys(event,type){
            // console.log('change');
            if(type == 1 && this.form.province){
                // let index = this.province.indexOf(this.form.province);
                let index = -1;
                this.province.forEach(item=>{
                if(this.form.province == item.name){
                    index = item.id
                }
                })
                if(index>=0){
                    this.getProvince(2,{province_index:index});
                }
                this.form.city='';
                this.form.area='';
            }
            if(type == 2 && this.form.city){
                this.form.area='';
                // 如果有远程搜索
                // if(this.iscitySearch && event){
                //     console.log('event:',event);
                //     let index = event.split('_')[1];
                //     let city_id = this.citys[index].id;
                //     let resdata = await getSearchProvince({city_id});
                //     this.resetCountry(resdata.data);
                // }

                let pindex = -1,cindex=-1;
                this.province.forEach(item=>{
                    if(this.form.province == item.name){
                        pindex = item.id;
                    }
                })
                console.log('this.citys:',this.citys,this.form.city);
                let name = '';
                if(this.form.city.includes('_')){
                    name = this.form.city.split('_')[0];
                }else{
                    name = this.form.city;
                }
                console.log('name:',name);
                this.citys.forEach(item=>{
                    if(name == item.name){
                        cindex = item.id;
                    }
                })
                // let pindex = this.province.indexOf(this.form.province);
                // let cindex = this.citys.indexOf(this.form.city);
                this.getProvince(3,{province_index:pindex,city_index:cindex});
            }
            this.$emit('changeCity', this.form)
            // if(type == 3 && this.isSearch){
            //     console.log('event:',event);
            //     if(event){
            //         let index = event.split('_')[1];
            //         let area_id = this.region[index].id;
            //         getSearchCitys({area_id}).then(res=>{
            //             if(res.code == 1){
            //                 this.resetCountry(res.data);
            //             }
            //         })
            //     }
            // }
            
        },


        clear(){
            this.form.area = '';
        },

        regionFilter(val){
            // if(this.type == 'search'){
            //     this.region = this.region.filter((item) => {
            //         if (item.name.indexOf(val) || item.name.toUpperCase().indexOf(val.toUpperCase())) {
            //             return true
            //         }
            //     })
            // };
            // console.log('val',val);
            if(val){
                this.isSearch = true;
                searchRegion({area:val}).then(res=>{
                if(res.code == 1){
                    this.region = res.data;
                }
                })
            }
        },

        cityFilter(val){
            if(val){
                this.iscitySearch = true;
                searchCity({city:val}).then(res=>{
                if(res.code == 1){
                    this.citys = res.data;
                }
                })
            }
        },

        // 重置选项
        resetCountry(data){
            this.regionSearch = data;
            let { pid,cid,aid } = data;
            this.province.forEach(item=>{
                if(pid == item.id){
                    this.form.province = item.name;
                    this.getProvince(2,{province_index:pid});
                }
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.inblock{
    display: inline-block;
}
.reddot{
    color: #F56C6C;
    // margin-right: 4px;
}
</style>